<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="author" content="Taffy">
    
    <meta name="description" content="纸上得来终觉浅，绝知此事要躬行！">
    
    
    
    
    
    
    <title>Javascript解构赋值 | 标签 | 阿飞</title>
    <link href=”https://taffyblog.github.io“ rel=”prefetch” />

    <link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/aos.css">
<link rel="stylesheet" href="/css/style.css">
    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/aos.js"></script>
    <script src="/js/highslide/highslide-full.min.js"></script>
    <link rel="stylesheet" href="/js/highslide/highslide.css">
    <style type="text/css">
        @media (max-width: 768px) {
            body {
                background-color: #f0f0f0;
                background: url('/imgs/xsbg.gif');
                background-attachment: fixed;
            }
        }
    </style>
    
    <!--<script type="text/javascript">
      if (document.images) {
        var avatar = new Image();
        avatar.src = '/imgs/avatar.jpg'
        var previews = 'preview1.jpg,preview2.jpg,preview3.jpg,preview4.jpg'.split(',')
        var previewsPreLoad = []
        for(var i = 0; i < length; i++) {
          previewsPreLoad.push(new Image())
          previewsPreLoad[previewsPreLoad.length - 1].src = '/imgs/preview' + previews[i]
        }
      }
    </script>-->
<link rel="stylesheet" href="/css/prism-vs.css" type="text/css">
<link rel="stylesheet" href="/css/prism-line-numbers.css" type="text/css"></head>
<body>
    <!-- 背景轮播图功能 -->
    <section class="hidden-xs">
    <ul class="cb-slideshow">
        <li><span>天若</span></li>
        <li><span>有情</span></li>
        <li><span>天亦老</span></li>
        <li><span>我为</span></li>
        <li><span>长者</span></li>
        <li><span>续一秒</span></li>
    </ul>
</section>
    <!-- 欧尼酱功能, 谁用谁知道 -->
    
    <div class="gal-menu gal-dropdown">
    <div class="circle" id="gal">
        <div class="ring">
            <a href="https://taffyblog.github.io" class="menuItem" style="left: 50%; top: 15%;">首页</a>
            
            <a class="menuItem" style="left: 80.3109%; top: 32.5%;">下一页</a>
            
            <a href="/archives" class="menuItem" style="left: 80.3109%; top: 67.5%;">归档</a>
            <a href="/about" class="menuItem" style="left: 50%; top: 85%;">关于</a>
            <a href="/message" class="menuItem" style="left: 19.6891%; top: 67.5%;">留言板</a>
            
            <a class="menuItem" style="left: 19.6891%; top: 32.5%;">上一页</a>
            
        </div>
        <audio id="audio" src="/imgs/oni.mp3"></audio>
    </div>
</div>
    
    <header class="navbar navbar-inverse" id="gal-header">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed"
                    data-toggle="collapse" data-target=".bs-navbar-collapse"
                    aria-expanded="false">
                <span class="fa fa-lg fa-reorder"></span>
            </button>
            <a href="https://taffyblog.github.io">
                
                <style>
                    #gal-header .navbar-brand {
                        height: 54px;
                        line-height: 24px;
                        font-size: 28px;
                        opacity: 1;
                        background-color: rgba(0,0,0,0);
                        text-shadow: 0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #228DFF,0 0 35px #228DFF,0 0 40px #228DFF,0 0 50px #228DFF,0 0 75px #228DFF;
                    }
                </style>
                <!-- 这里使用文字(navbar_text or config.title) -->
                <div class="navbar-brand">小飞</div>
                
            </a>
        </div>
        <div class="collapse navbar-collapse bs-navbar-collapse">
            <ul class="nav navbar-nav" id="menu-gal">
                
                
                <li class="">
                    <a href="/">
                        <i class="fa fa-home"></i>首页
                    </a>
                </li>
                
                
                
                <li class="">
                    <a href="/archives">
                        <i class="fa fa-archive"></i>归档
                    </a>
                </li>
                
                
                
                
                <li class="dropdown">
                    <!-- TODO 添加hover dropdown效果 -->
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"
                       aria-haspopup="true" aria-expanded="false" data-hover="dropdown">
                        <i class="fa fa-list"></i>分类
                    </a>
                    <ul class="dropdown-menu">
                        
                        
                        <li>
                            <a href="/categories/设计模式/">设计模式</a>
                        </li>
                        
                        <li>
                            <a href="/categories/前端/">前端</a>
                        </li>
                        
                        <li>
                            <a href="/categories/ORM/">ORM</a>
                        </li>
                        
                        
                        <li>
                            <a href="/categories">...</a>
                        </li>
                        
                        
                    </ul>
                </li>
                
                
                
                
                
                <li class="dropdown">
                    <!-- TODO 添加hover dropdown效果 -->
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"
                       aria-haspopup="true" aria-expanded="false" data-hover="dropdown">
                        <i class="fa fa-tags"></i>标签
                    </a>
                    <ul class="dropdown-menu">
                        
                        
                        <li>
                            <a href="/tags/结构型设计模式/">结构型设计模式</a>
                        </li>
                        
                        <li>
                            <a href="/tags/Javascript/">Javascript</a>
                        </li>
                        
                        <li>
                            <a href="/tags/EF6/">EF6</a>
                        </li>
                        
                        
                        <li>
                            <a href="/tags">...</a>
                        </li>
                        
                        
                    </ul>
                </li>
                
                
                
                
                <li class="">
                    <a href="/links">
                        <i class="fa fa-meanpath"></i>外链
                    </a>
                </li>
                
                
                
                <li class="">
                    <a href="/about">
                        <i class="fa fa-user"></i>关于我
                    </a>
                </li>
                
                
            </ul>
        </div>
    </div>
</header>
    <div id="gal-body">
        <div class="container">
            <div class="row">
                 <!-- link页面不显示侧边栏 -->
                
                    <div class="col-md-8 gal-right" id="mainstay">
                         
<article class="article well article-body" id="article">
    <div class="breadcrumb">
        <i class="fa fa-home"></i>
        <a href="https://taffyblog.github.io">阿飞</a>
        >
        <span>Javascript解构赋值</span>
    </div>
    
    <!-- 大型设备详细文章 -->
    <div class="hidden-xs">
        <div class="title-article">
            <h1>
                <a href="/2018/06/22/DestructuringAssignment/">Javascript解构赋值</a>
            </h1>
        </div>
        <div class="tag-article">
            
            <span class="label label-gal">
                <i class="fa fa-tags"></i>
                
                <a href="/tags/Javascript/">Javascript</a>
                
            </span>
            
            <span class="label label-gal">
                <i class="fa fa-calendar"></i> 2018-06-22
            </span>
            
        </div>
    </div>
    <!-- 小型设备详细文章 -->
    <div class="visible-xs">
        <center>
            <div class="title-article">
                <h4>
                    <a href="/2018/06/22/DestructuringAssignment/">Javascript解构赋值</a>
                </h4>
            </div>
            <p>
                <i class="fa fa-calendar"></i> 2018-06-22
            </p>
            <p>
                
                <i class="fa fa-tags"></i>
                
                <a href="/tags/Javascript/">Javascript</a>
                
                
                
            </p>
        </center>
    </div>
     <!-- 文章 目录 -->
    <ol class="post-toc"><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#解构数组"><span class="post-toc-number">1.</span> <span class="post-toc-text">解构数组</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#变量声明并赋值时的解构"><span class="post-toc-number">1.1.</span> <span class="post-toc-text">变量声明并赋值时的解构</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#变量先声明后赋值时的解构"><span class="post-toc-number">1.2.</span> <span class="post-toc-text">变量先声明后赋值时的解构</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#默认值"><span class="post-toc-number">1.3.</span> <span class="post-toc-text">默认值</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#交换变量"><span class="post-toc-number">1.4.</span> <span class="post-toc-text">交换变量</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#解析一个从函数返回的数组"><span class="post-toc-number">1.5.</span> <span class="post-toc-text">解析一个从函数返回的数组</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#忽略某些返回值"><span class="post-toc-number">1.5.1.</span> <span class="post-toc-text">忽略某些返回值</span></a></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#用正则表达式匹配提取值"><span class="post-toc-number">1.6.</span> <span class="post-toc-text">用正则表达式匹配提取值</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#无声明赋值"><span class="post-toc-number">1.7.</span> <span class="post-toc-text">无声明赋值</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#给新的变量名赋值"><span class="post-toc-number">1.8.</span> <span class="post-toc-text">给新的变量名赋值</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#默认值-1"><span class="post-toc-number">1.9.</span> <span class="post-toc-text">默认值</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#给新的变量命名并提供默认值"><span class="post-toc-number">1.9.1.</span> <span class="post-toc-text">给新的变量命名并提供默认值</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#函数参数默认值"><span class="post-toc-number">1.9.2.</span> <span class="post-toc-text">函数参数默认值</span></a></li></ol></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#解构嵌套对象和数组"><span class="post-toc-number">2.</span> <span class="post-toc-text">解构嵌套对象和数组</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#For-of-迭代和解构"><span class="post-toc-number">3.</span> <span class="post-toc-text">For of 迭代和解构</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#从作为函数实参的对象中提取数据"><span class="post-toc-number">4.</span> <span class="post-toc-text">从作为函数实参的对象中提取数据</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#对象属性名和解构"><span class="post-toc-number">5.</span> <span class="post-toc-text">对象属性名和解构</span></a></li></ol>
    <div class="content-article">
        <blockquote>
<p>解构赋值语法是一个 Javascript 表达式，这使得可以将值从数组或属性从对象提取到不同的变量中。</p>
</blockquote>
<h2 id="解构数组"><a href="#解构数组" class="headerlink" title="解构数组"></a>解构数组</h2><h3 id="变量声明并赋值时的解构"><a href="#变量声明并赋值时的解构" class="headerlink" title="变量声明并赋值时的解构"></a>变量声明并赋值时的解构</h3><pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token keyword">var</span> foo <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"one"</span><span class="token punctuation">,</span> <span class="token string">"two"</span><span class="token punctuation">,</span> <span class="token string">"three"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> <span class="token punctuation">[</span>one<span class="token punctuation">,</span> two<span class="token punctuation">,</span> three<span class="token punctuation">]</span> <span class="token operator">=</span> foo<span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>one<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// "one"</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>two<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// "two"</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>three<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// "three"</span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<h3 id="变量先声明后赋值时的解构"><a href="#变量先声明后赋值时的解构" class="headerlink" title="变量先声明后赋值时的解构"></a>变量先声明后赋值时的解构</h3><pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token keyword">var</span> a<span class="token punctuation">,</span> b<span class="token punctuation">;</span>

<span class="token punctuation">[</span>a<span class="token punctuation">,</span> b<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// 1</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// 2</span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<h3 id="默认值"><a href="#默认值" class="headerlink" title="默认值"></a>默认值</h3><pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token comment" spellcheck="true">//为了防止从数组中取出一个值为undefined的对象，可以为这个对象设置默认值。</span>
<span class="token keyword">var</span> a<span class="token punctuation">,</span> b<span class="token punctuation">;</span>

<span class="token punctuation">[</span>a <span class="token operator">=</span> <span class="token number">5</span><span class="token punctuation">,</span> b <span class="token operator">=</span> <span class="token number">7</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// 1</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// 7</span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<h3 id="交换变量"><a href="#交换变量" class="headerlink" title="交换变量"></a>交换变量</h3><ol>
<li><p>在一个解构表达式中可以交换两个变量的值。</p>
</li>
<li><p>没有解构赋值的情况下，交换两个变量需要一个临时变量。</p>
</li>
</ol>
<pre class="line-numbers language-javascript"><code class="language-javascript">
<span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> b <span class="token operator">=</span> <span class="token number">3</span><span class="token punctuation">;</span>

<span class="token punctuation">[</span>a<span class="token punctuation">,</span> b<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span>b<span class="token punctuation">,</span> a<span class="token punctuation">]</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// 3</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// 1</span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<h3 id="解析一个从函数返回的数组"><a href="#解析一个从函数返回的数组" class="headerlink" title="解析一个从函数返回的数组"></a>解析一个从函数返回的数组</h3><blockquote>
<p>从一个函数返回一个数组是十分常见的情况.。解构使得处理返回值为数组时更加方便。</p>
</blockquote>
<p>在下面例子中，<code>[1, 2]</code> 作为函数的<code>f()</code> 的输出值，可以使用解构用一句话完成解析:</p>
<pre class="line-numbers language-javascript"><code class="language-javascript">
<span class="token keyword">function</span> <span class="token function">f</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">var</span> a<span class="token punctuation">,</span> b<span class="token punctuation">;</span>
<span class="token punctuation">[</span>a<span class="token punctuation">,</span> b<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">f</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// 1</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// 2</span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<h4 id="忽略某些返回值"><a href="#忽略某些返回值" class="headerlink" title="忽略某些返回值"></a>忽略某些返回值</h4><blockquote>
<p>你也可以忽略你不感兴趣的返回值：<br><code>`</code>javascript<br>function f() {<br>    return [1, 2, 3];<br>}</p>
</blockquote>
<p>var [a, , b] = f();<br>console.log(a); // 1<br>console.log(b); // 3</p>
<pre><code>### 将剩余数组赋值给一个变量

&gt; 当解构一个数组时，可以使用剩余模式，将数组剩余部分赋值给一个变量。

```javascript
var [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]

</code></pre><blockquote>
<p>注意：如果剩余元素右侧有一个逗号，会抛出SyntaxError，因为剩余元素必须是数组的最后一个元素。</p>
</blockquote>
<h3 id="用正则表达式匹配提取值"><a href="#用正则表达式匹配提取值" class="headerlink" title="用正则表达式匹配提取值"></a>用正则表达式匹配提取值</h3><blockquote>
<p>用正则表达式方法exec()匹配字符串会返回一个数组，该数组第一个值是完全匹配正则表达式的字符串，然后的值是匹配正则表达式括号内内容部分。解构赋值允许你轻易地提取出需要的部分，忽略完全匹配的字符串——如果不需要的话<br><code>`</code>javascript<br>var url = “<a href="https://developer.mozilla.org/en-US/Web/JavaScript&quot;" target="_blank" rel="noopener">https://developer.mozilla.org/en-US/Web/JavaScript&quot;</a>;</p>
</blockquote>
<p>var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);<br>console.log(parsedURL); // [“<a href="https://developer.mozilla.org/en-US/Web/JavaScript&quot;" target="_blank" rel="noopener">https://developer.mozilla.org/en-US/Web/JavaScript&quot;</a>, “https”, “developer.mozilla.org”, “en-US/Web/JavaScript”]</p>
<p>var [, protocol, fullhost, fullpath] = parsedURL;</p>
<p>console.log(protocol); // “https”</p>
<pre><code>## 解构对象

### 基本赋值
```javascript
var o = { p: 42, q: true };
var { p, q } = o;

console.log(p); // 42
console.log(q); // true
</code></pre><h3 id="无声明赋值"><a href="#无声明赋值" class="headerlink" title="无声明赋值"></a>无声明赋值</h3><pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token keyword">var</span> a<span class="token punctuation">,</span> b<span class="token punctuation">;</span>

<span class="token punctuation">(</span><span class="token punctuation">{</span> a<span class="token punctuation">,</span> b <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token punctuation">{</span> a<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> b<span class="token punctuation">:</span> <span class="token number">2</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>
<ol>
<li>赋值语句周围的( .. ) 是使用对象字面解构赋值时不需要声明的语法。</li>
<li>{ a, b } = { a: 1, b: 2 } 不是有效的独立语法，因为左边的{a, b }</li>
<li>被认为是一个块而不是对象字面量。然而，({ a, b } = { a: 1, b: 2 })</li>
<li>是有效的，正如 var { a, b } = { a: 1, b: 2 }</li>
<li>注意：你的( .. ) 表达式需要一个分号在它前面，否则它也许会被当成上一行中的函数来执行。</li>
</ol>
<h3 id="给新的变量名赋值"><a href="#给新的变量名赋值" class="headerlink" title="给新的变量名赋值"></a>给新的变量名赋值</h3><blockquote>
<p>可以从一个对象中提取变量并赋值给和对象属性名不同的新的变量名。自定义变量名/重新定义变量名</p>
</blockquote>
<pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token comment" spellcheck="true">//p和q只是一个模式匹配</span>

<span class="token keyword">var</span> o <span class="token operator">=</span> <span class="token punctuation">{</span> p<span class="token punctuation">:</span> <span class="token number">42</span><span class="token punctuation">,</span> q<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> <span class="token punctuation">{</span> p<span class="token punctuation">:</span> foo<span class="token punctuation">,</span> q<span class="token punctuation">:</span> bar <span class="token punctuation">}</span> <span class="token operator">=</span> o<span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>foo<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// 42 </span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>bar<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// true</span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<h3 id="默认值-1"><a href="#默认值-1" class="headerlink" title="默认值"></a>默认值</h3><blockquote>
<p>变量可以先赋予默认值。当要提取的对象没有对应的属性，变量就被赋予默认值。</p>
</blockquote>
<pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token keyword">var</span> <span class="token punctuation">{</span> a <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">,</span> b <span class="token operator">=</span> <span class="token number">5</span> <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token punctuation">{</span> a<span class="token punctuation">:</span> <span class="token number">3</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// 3</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// 5</span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>
<h4 id="给新的变量命名并提供默认值"><a href="#给新的变量命名并提供默认值" class="headerlink" title="给新的变量命名并提供默认值"></a>给新的变量命名并提供默认值</h4><blockquote>
<p>一个属性可以是从一个对象解构，并分配给一个不同名称的变量，分配一个默认值，以防未解构的值是undefined。</p>
</blockquote>
<pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token keyword">var</span> <span class="token punctuation">{</span> a<span class="token punctuation">:</span> aa <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">,</span> b<span class="token punctuation">:</span> bb <span class="token operator">=</span> <span class="token number">5</span> <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token punctuation">{</span> a<span class="token punctuation">:</span> <span class="token number">3</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>aa<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// 3</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>bb<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// 5</span>

<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<h4 id="函数参数默认值"><a href="#函数参数默认值" class="headerlink" title="函数参数默认值"></a>函数参数默认值</h4><pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token comment" spellcheck="true">//ES5版本</span>
<span class="token keyword">function</span> <span class="token function">drawES5Chart</span><span class="token punctuation">(</span>options<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    options <span class="token operator">=</span> options <span class="token operator">===</span> undefined <span class="token operator">?</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">:</span> options<span class="token punctuation">;</span>
    <span class="token keyword">var</span> size <span class="token operator">=</span> options<span class="token punctuation">.</span>size <span class="token operator">===</span> undefined <span class="token operator">?</span> <span class="token string">'big'</span> <span class="token punctuation">:</span> options<span class="token punctuation">.</span>size<span class="token punctuation">;</span>
    <span class="token keyword">var</span> cords <span class="token operator">=</span> options<span class="token punctuation">.</span>cords <span class="token operator">===</span> undefined <span class="token operator">?</span> <span class="token punctuation">{</span> x<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span> y<span class="token punctuation">:</span> <span class="token number">0</span> <span class="token punctuation">}</span> <span class="token punctuation">:</span> options<span class="token punctuation">.</span>cords<span class="token punctuation">;</span>
    <span class="token keyword">var</span> radius <span class="token operator">=</span> options<span class="token punctuation">.</span>radius <span class="token operator">===</span> undefined <span class="token operator">?</span> <span class="token number">25</span> <span class="token punctuation">:</span> options<span class="token punctuation">.</span>radius<span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>size<span class="token punctuation">,</span> cords<span class="token punctuation">,</span> radius<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment" spellcheck="true">// now finally do some chart drawing</span>
<span class="token punctuation">}</span>

<span class="token function">drawES5Chart</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    cords<span class="token punctuation">:</span> <span class="token punctuation">{</span> x<span class="token punctuation">:</span> <span class="token number">18</span><span class="token punctuation">,</span> y<span class="token punctuation">:</span> <span class="token number">30</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    radius<span class="token punctuation">:</span> <span class="token number">30</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment" spellcheck="true">//ES6版本</span>
<span class="token keyword">function</span> <span class="token function">drawES2015Chart</span><span class="token punctuation">(</span><span class="token punctuation">{</span> size <span class="token operator">=</span> <span class="token string">'big'</span><span class="token punctuation">,</span> cords <span class="token operator">=</span> <span class="token punctuation">{</span> x<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span> y<span class="token punctuation">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> radius <span class="token operator">=</span> <span class="token number">25</span> <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>size<span class="token punctuation">,</span> cords<span class="token punctuation">,</span> radius<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment" spellcheck="true">// do some chart drawing</span>
<span class="token punctuation">}</span>

<span class="token function">drawES2015Chart</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    cords<span class="token punctuation">:</span> <span class="token punctuation">{</span> x<span class="token punctuation">:</span> <span class="token number">18</span><span class="token punctuation">,</span> y<span class="token punctuation">:</span> <span class="token number">30</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    radius<span class="token punctuation">:</span> <span class="token number">30</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<ol>
<li>在上面的drawES2015Chart的函数签名中，解构的左手边被分配给右手边的空对象字面值：{ size = ‘big’, cords = { x: 0, y: 0 }, radius = 25 } = { } 。</li>
<li>你也可以在没有右侧分配的情况下编写函数。</li>
<li>但是，如果你忽略了右边的赋值，那么函数会在被调用的时候查找至少一个被提供的参数，而在当前的形式下，你可以直接调用drawES2015Chart()而不提供任何参数。</li>
<li>如果你希望能够在不提供任何参数的情况下调用该函数，则当前的设计非常有用，而另一种方法在您确保将对象传递给函数时非常有用。</li>
</ol>
<h2 id="解构嵌套对象和数组"><a href="#解构嵌套对象和数组" class="headerlink" title="解构嵌套对象和数组"></a>解构嵌套对象和数组</h2><pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token keyword">var</span> metadata <span class="token operator">=</span> <span class="token punctuation">{</span>
    title<span class="token punctuation">:</span> <span class="token string">"Scratchpad"</span><span class="token punctuation">,</span>
    translations<span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span>
            locale<span class="token punctuation">:</span> <span class="token string">"de"</span><span class="token punctuation">,</span>
            localization_tags<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
            last_edit<span class="token punctuation">:</span> <span class="token string">"2014-04-14T08:43:37"</span><span class="token punctuation">,</span>
            url<span class="token punctuation">:</span> <span class="token string">"/de/docs/Tools/Scratchpad"</span><span class="token punctuation">,</span>
            title<span class="token punctuation">:</span> <span class="token string">"JavaScript-Umgebung"</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    url<span class="token punctuation">:</span> <span class="token string">"/en-US/docs/Tools/Scratchpad"</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> <span class="token punctuation">{</span> title<span class="token punctuation">:</span> englishTitle<span class="token punctuation">,</span> translations<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> title<span class="token punctuation">:</span> localeTitle <span class="token punctuation">}</span><span class="token punctuation">]</span> <span class="token punctuation">}</span> <span class="token operator">=</span> metadata<span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>englishTitle<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// "Scratchpad"</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>localeTitle<span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment" spellcheck="true">// "JavaScript-Umgebung"</span>

<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<h2 id="For-of-迭代和解构"><a href="#For-of-迭代和解构" class="headerlink" title="For of 迭代和解构"></a>For of 迭代和解构</h2><pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token keyword">var</span> people <span class="token operator">=</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
        name<span class="token punctuation">:</span> <span class="token string">"Mike Smith"</span><span class="token punctuation">,</span>
        family<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            mother<span class="token punctuation">:</span> <span class="token string">"Jane Smith"</span><span class="token punctuation">,</span>
            father<span class="token punctuation">:</span> <span class="token string">"Harry Smith"</span><span class="token punctuation">,</span>
            sister<span class="token punctuation">:</span> <span class="token string">"Samantha Smith"</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        age<span class="token punctuation">:</span> <span class="token number">35</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
        name<span class="token punctuation">:</span> <span class="token string">"Tom Jones"</span><span class="token punctuation">,</span>
        family<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            mother<span class="token punctuation">:</span> <span class="token string">"Norah Jones"</span><span class="token punctuation">,</span>
            father<span class="token punctuation">:</span> <span class="token string">"Richard Jones"</span><span class="token punctuation">,</span>
            brother<span class="token punctuation">:</span> <span class="token string">"Howard Jones"</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        age<span class="token punctuation">:</span> <span class="token number">25</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> n<span class="token punctuation">,</span> family<span class="token punctuation">:</span> <span class="token punctuation">{</span> father<span class="token punctuation">:</span> f <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">of</span> people<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Name: "</span> <span class="token operator">+</span> n <span class="token operator">+</span> <span class="token string">", Father: "</span> <span class="token operator">+</span> f<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment" spellcheck="true">// "Name: Mike Smith, Father: Harry Smith"</span>
<span class="token comment" spellcheck="true">// "Name: Tom Jones, Father: Richard Jones"</span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<h2 id="从作为函数实参的对象中提取数据"><a href="#从作为函数实参的对象中提取数据" class="headerlink" title="从作为函数实参的对象中提取数据"></a>从作为函数实参的对象中提取数据</h2><pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token keyword">function</span> <span class="token function">userId</span><span class="token punctuation">(</span><span class="token punctuation">{</span> id <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> id<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">whois</span><span class="token punctuation">(</span><span class="token punctuation">{</span> displayName<span class="token punctuation">:</span> displayName<span class="token punctuation">,</span> fullName<span class="token punctuation">:</span> <span class="token punctuation">{</span> firstName<span class="token punctuation">:</span> name <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>displayName <span class="token operator">+</span> <span class="token string">" is "</span> <span class="token operator">+</span> name<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">var</span> user <span class="token operator">=</span> <span class="token punctuation">{</span>
    id<span class="token punctuation">:</span> <span class="token number">42</span><span class="token punctuation">,</span>
    displayName<span class="token punctuation">:</span> <span class="token string">"jdoe"</span><span class="token punctuation">,</span>
    fullName<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        firstName<span class="token punctuation">:</span> <span class="token string">"John"</span><span class="token punctuation">,</span>
        lastName<span class="token punctuation">:</span> <span class="token string">"Doe"</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"userId: "</span> <span class="token operator">+</span> <span class="token function">userId</span><span class="token punctuation">(</span>user<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// "userId: 42"</span>
<span class="token function">whois</span><span class="token punctuation">(</span>user<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// "jdoe is John"</span>

<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<blockquote>
<p>这段代码从user对象中提取并输出id、displayName和firstName。</p>
</blockquote>
<h2 id="对象属性名和解构"><a href="#对象属性名和解构" class="headerlink" title="对象属性名和解构"></a>对象属性名和解构</h2><blockquote>
<p>属性名，如object literals，可以被解构。</p>
</blockquote>
<pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token keyword">let</span> key <span class="token operator">=</span> <span class="token string">"z"</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> <span class="token punctuation">{</span> <span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">:</span> foo <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token punctuation">{</span> z<span class="token punctuation">:</span> <span class="token string">"bar"</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>foo<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// "bar"</span>

<span class="token comment" spellcheck="true">//对象解构中的Rest</span>

<span class="token comment" spellcheck="true">//Rest 属性收集尚未被解构模式拾取的剩余可枚举属性键。</span>
<span class="token keyword">let</span> <span class="token punctuation">{</span> a<span class="token punctuation">,</span> b<span class="token punctuation">,</span> <span class="token operator">...</span>rest <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token punctuation">{</span> a<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span> b<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">,</span> c<span class="token punctuation">:</span> <span class="token number">30</span><span class="token punctuation">,</span> d<span class="token punctuation">:</span> <span class="token number">40</span> <span class="token punctuation">}</span>
a<span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// 10 </span>
b<span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// 20 </span>
rest<span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// { c: 30, d: 40 }</span>

<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<p><a href="https://developer.mozilla.org/zh-CN/" target="_blank" rel="noopener">参考链接</a></p>

    </div>
</article>


<div id="comments-template"></div>
<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">
<script>
	if(!window.commentConfig) {
      window.commentConfig = {}
      window.commentConfig.title = 'Javascript解构赋值'
    }
</script>

                    </div>
                    <aside class="col-md-4 gal-left" id="sidebar">
    <!-- 此为sidebar的搜索框, 非搜索结果页面 -->
<aside id="sidebar-search">
    <div class="search hidden-xs" data-aos="fade-up" data-aos-duration="2000">
        <form class="form-inline clearfix" id="search-form" method="get"
              action="/search/index.html">
            <input type="text" name="s" class="form-control" id="searchInput" placeholder="搜索文章~">
            <button class="btn btn-danger btn-gal" type="submit">
                <i class="fa fa-search"></i>
            </button>
        </form>
    </div>
</aside>
    <aside id="sidebar-author">
    <div class="panel panel-gal" data-aos="flip-right" data-aos-duration="3000">
        <div class="panel-heading" style="text-align: center">
            <i class="fa fa-quote-left"></i>
            Taffy
            <i class="fa fa-quote-right"></i>
        </div>
        <div class="author-panel text-center">
            <img src="/imgs/avatar.jpg" width="140" height="140"
                 alt="个人头像" class="author-image">
            <p class="author-description"><p>纸上得来终觉浅，绝知此事要躬行！</p>
</p>
        </div>
    </div>
</aside>
    
    <aside id="sidebar-recent_comments">
    <div class="panel panel-gal recent hidden-xs" data-aos="fade-up" data-aos-duration="2000">
        <div class="panel-heading">
            <i class="fa fa-comments"></i>
            最新评论
            <i class="fa fa-times-circle panel-remove"></i>
            <i class="fa fa-chevron-circle-up panel-toggle"></i>
        </div>
        <ul class="list-group list-group-flush"></ul>
    </div>
</aside>
    
    <!-- 要配置好leancloud才能开启此小工具 -->
    
    
    <aside id="sidebar-recent_posts">
    <div class="panel panel-gal recent hidden-xs" data-aos="fade-up" data-aos-duration="2000">
        <div class="panel-heading">
            <i class="fa fa-refresh"></i>
            近期文章
            <i class="fa fa-times-circle panel-remove"></i>
            <i class="fa fa-chevron-circle-up panel-toggle"></i>
        </div>
        <ul class="list-group list-group-flush">
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2018/08/14/vueJsRoute/">VueJs路由入门</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2018/07/31/vueJsCompoentData/">VueJs组件间的数据交换</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2018/07/30/vueJsComponentSendData/">VueJs组件插槽、动态组件、缓存组件</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2018/07/26/vueJswebpack/">VueJs通过webpack启服务运行VUE模块文件</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2018/07/25/vuejscmd/">VueJs自定义指令和组件</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2018/07/25/vueAttr/">VueJs实例属性</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2018/07/20/vueLifeCycle/">VueJs生命周期、计算属性和侦听器</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2018/07/17/vueJsFilter/">VueJs过滤器</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2018/07/16/vueJsEvent/">VueJs事件操作</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2018/07/12/vuejstemplete/">VueJs表单数据操作</a>
                </span>
            </li>
            
        </ul>
    </div>
</aside>
    
    
    <aside id="sidebar-rand_posts">
    <div class="panel panel-gal recent hidden-xs" data-aos="fade-up" data-aos-duration="2000">
        <div class="panel-heading">
            <i class="fa fa-refresh"></i>
            随机文章
            <i class="fa fa-times-circle panel-remove"></i>
            <i class="fa fa-chevron-circle-up panel-toggle"></i>
        </div>
        <ul class="list-group list-group-flush">
            
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2017/12/12/JavaScriptOO/">Javascript 面向对象</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2017/10/14/ToolsNotes/">工具及、知识点及外链收集</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2017/05/13/dynamic/">dynamic类型</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2018/04/29/jsSingleton/">Js单例模式</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2017/09/28/remotegit/">使用远程Git仓库</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2017/05/24/symbolnumber/">汇编学习(三)--有符号数和无符号数</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2018/07/12/vuejstemplete/">VueJs表单数据操作</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2017/05/12/aspdownbigfile/">ASP.NET断点续传大文件</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2017/09/17/httpAndWebSocket/">HTTP协议与WebSocket</a>
                </span>
            </li>
            
            <li class="list-group-item">
                <span class="post-title">
                    <a href="/2017/05/15/task_async/">C#多线程</a>
                </span>
            </li>
            
        </ul>
    </div>
</aside>
    
    
    <aside id="gal-sets">
        <div class="panel panel-gal hidden-xs" data-aos="fade-up" data-aos-duration="2000">
            <ul class="nav nav-pills pills-gal">
                <li class="">
                    <a href="/2018/06/22/DestructuringAssignment/index.html#sidebar-tags" data-toggle="tab" id="tags-tab">热门标签</a>
                </li>
                <li class="">
                    <a href="/2018/06/22/DestructuringAssignment/index.html#sidebar-friend-links" data-toggle="tab" id="friend-links-tab">友情链接</a>
                </li>
                <li class="">
                    <a href="/2018/06/22/DestructuringAssignment/index.html#sidebar-links" data-toggle="tab" id="links-tab">个人链接</a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="cloud-tags tab-pane nav bs-sidenav fade" id="sidebar-tags">
    
    <a href="/tags/结构型设计模式/" style="font-size: 13.665764367654686px;" class="tag-cloud-link">结构型设计模式</a>
    
    <a href="/tags/Javascript/" style="font-size: 14.156414099221125px;" class="tag-cloud-link">Javascript</a>
    
    <a href="/tags/EF6/" style="font-size: 18.737289121495138px;" class="tag-cloud-link">EF6</a>
    
    <a href="/tags/创建型设计模式/" style="font-size: 13.440179597999425px;" class="tag-cloud-link">创建型设计模式</a>
    
    <a href="/tags/程序集/" style="font-size: 8.670538655530056px;" class="tag-cloud-link">程序集</a>
    
    <a href="/tags/CSS/" style="font-size: 19.24251168515581px;" class="tag-cloud-link">CSS</a>
    
    <a href="/tags/javascript/" style="font-size: 13.995431483626332px;" class="tag-cloud-link">javascript</a>
    
    <a href="/tags/正则表达式/" style="font-size: 17.204631482427065px;" class="tag-cloud-link">正则表达式</a>
    
    <a href="/tags/WinForm/" style="font-size: 13.84544069000411px;" class="tag-cloud-link">WinForm</a>
    
    <a href="/tags/多线程/" style="font-size: 11.604009743372806px;" class="tag-cloud-link">多线程</a>
    
    <a href="/tags/Oracle/" style="font-size: 14.15147155006666px;" class="tag-cloud-link">Oracle</a>
    
    <a href="/tags/加密/" style="font-size: 11.037445099242369px;" class="tag-cloud-link">加密</a>
    
    <a href="/tags/ES6/" style="font-size: 16.311669395803303px;" class="tag-cloud-link">ES6</a>
    
    <a href="/tags/VueJs/" style="font-size: 10.656313691299097px;" class="tag-cloud-link">VueJs</a>
    
    <a href="/tags/代码段/" style="font-size: 15.960292634996705px;" class="tag-cloud-link">代码段</a>
    
    <a href="/tags/ASP-NET/" style="font-size: 11.024831960772033px;" class="tag-cloud-link">ASP.NET</a>
    
    <a href="/tags/XML/" style="font-size: 13.693553147209926px;" class="tag-cloud-link">XML</a>
    
    <a href="/tags/数据库/" style="font-size: 12.157740286253153px;" class="tag-cloud-link">数据库</a>
    
</div>
                <div class="friend-links tab-pane nav bs-sidenav fade" id="sidebar-friend-links">
    
    <li>
        <a href="http://www.baidu.com/" target="_blank">百度</a>
    </li>
    
</div>
                <div class="links tab-pane nav bs-sidenav fade" id="sidebar-links">
    
    <li>
        <a href="https://github.com/TaffyBlog" target="_blank">Github</a>
    </li>
    
    <li>
        <a href="https://www.zhihu.com/people/fei-ge-ge-2-8/activities" target="_blank">知乎</a>
    </li>
    
</div>
            </div>
        </div>
    </aside>
    
</aside>
                
            </div>
        </div>
    </div>
    <footer id="gal-footer">
    <div class="container">
        Copyright © 2018 Taffy Powered by <a href="https://hexo.io/" target="_blank">Hexo</a>.&nbsp;Theme by <a href="https://github.com/ZEROKISEKI" target="_blank">AONOSORA</a>
    </div>
</footer>

<!-- 回到顶端 -->
<div id="gal-gotop">
    <i class="fa fa-angle-up"></i>
</div>
<script src="/live2dw/lib/L2Dwidget.min.js?0c58a1486de42ac6cc1c59c7d98ae887"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","model":{"scale":1,"hHeadPos":0.5,"vHeadPos":0.618,"jsonPath":"/live2dw/assets/assets/hibiki.model.json"},"display":{"superSample":1.5,"width":150,"height":300,"position":"right","hOffset":0,"vOffset":0},"mobile":{"show":true,"scale":0.1},"react":{"opacityDefault":0.7,"opacityOnHover":0.2},"log":false,"tagMode":false});</script></body>
<script src="/js/activate-power-mode.js"></script>
<script>

    // 配置highslide
	hs.graphicsDir = '/js/highslide/graphics/'
    hs.outlineType = "rounded-white";
    hs.dimmingOpacity = 0.8;
    hs.outlineWhileAnimating = true;
    hs.showCredits = false;
    hs.captionEval = "this.thumb.alt";
    hs.numberPosition = "caption";
    hs.align = "center";
    hs.transitions = ["expand", "crossfade"];
    hs.lang.number = '共%2张图, 当前是第%1张';
    hs.addSlideshow({
      interval: 5000,
      repeat: true,
      useControls: true,
      fixedControls: "fit",
      overlayOptions: {
        opacity: 0.75,
        position: "bottom center",
        hideOnMouseOut: true
      }
    })

    // 初始化aos
    AOS.init({
      duration: 1000,
      delay: 0,
      easing: 'ease-out-back'
    });

</script>
<script>
	POWERMODE.colorful = 'true';    // make power mode colorful
	POWERMODE.shake = 'true';       // turn off shake
	// TODO 这里根据具体情况修改
	document.body.addEventListener('input', POWERMODE);
</script>
<script>
    window.slideConfig = {
      prefix: 'http://p9hqbt6wm.bkt.clouddn.com/background',
      ext: 'jpg',
      maxCount: '6'
    }
</script>
<script src="/js/hs.js"></script>
<script src="/js/blog.js"></script>

<script src="/js/oni.js"></script>



<script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
<script>
    if(window.commentConfig) {
      window.commentConfig.id = 'Fri Jun 22 2018 12:10:16 GMT+0800'
      window.commentConfig.owner = 'TaffyBlog'
      window.commentConfig.repo = 'taffyblogcomments'
      window.commentConfig.client_id = 'fd4a3c1821147e2a3dfe'
      window.commentConfig.client_secret = 'de6bc8eec3ca751089ca7cca196515cb6a4a7c24'
      window.commentConfig.redirect_uri = 'https://taffyblog.github.io'
    } else {
      window.commentConfig = {
      	id: 'Fri Jun 22 2018 12:10:16 GMT+0800',
        owner: 'TaffyBlog',
        repo: 'taffyblogcomments',
        client_id: 'fd4a3c1821147e2a3dfe',
        client_secret: 'de6bc8eec3ca751089ca7cca196515cb6a4a7c24',
        redirect_uri: 'https://taffyblog.github.io'
      }
    }
</script>
<script src="/js/comment/gitment.js"></script>

</html>